<template>
    <div>
        <upNavbar :title="'收藏夹'" :bgColor="'#fff'" :rightIcon="'trash-fill'" @rightClick="handleRightClick"></upNavbar>
        <div class="bodyBox">
            <view>
                <u-grid :border="false" col="2">
                    <u-grid-item v-for="(listItem, listIndex) in gridList" :key="listIndex"
                        @click="gridItemClick(listItem)">
                        <div class="gridItemBox">
                            <div class="liteBox">
                                <image class="image" src="@/static/logo.png" alt="" />
                                <span class="liteText">{{ listItem.text }}</span>
                                <div class="liteFootle">
                                    <image class="fontImg" src="@/static/images/xin.png" alt="" />
                                    <span>{{ listItem.likeNum }}</span>
                                    <span class="liteTitle">{{ listItem.title }}</span>
                                </div>
                            </div>
                        </div>
                    </u-grid-item>
                </u-grid>
                <div class="bodyFootle">
                    <span>没有更多了~</span>
                </div>
                <u-toast ref="uToast" />
            </view>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import upNavbar from '../../components/upNavbar.vue';
const props = defineProps({

})

const gridList = reactive([
    {
        text: 'photo示例文字photo示例文字photo示例文字示例文字photo示例文字photo示例文字',
        title: '图片',
        likeNum: 201,
    },
    {
        text: 'lock',
        title: '锁头',
        likeNum: 205,
    },
    {
        text: 'photo',
        title: '图片',
        likeNum: 20,
    },
    {
        text: 'lock',
        title: '锁头',
        likeNum: 20,
    },
    {
        text: 'lock',
        title: '锁头',
        likeNum: 20,
    },
    {
        text: 'lock',
        title: '锁头',
        likeNum: 20,
    },
    {
        text: 'lock',
        title: '锁头',
        likeNum: 20,
    },
])
const handleRightClick = () => {
    console.log('父组件捕获到 rightClick 事件');
};
</script>
<style scoped lang="scss">
.bodyBox {
    width: 100%;
    height: 100vh;
    overflow-y: auto;

    .gridItemBox {
        width: 92%;
        margin: 10rpx auto;
        background-color: #fff;
        border-radius: 10px;

        .liteBox {
            width: 86%;
            margin: 20rpx auto;

            .liteText {
                width: 100%;
                height: 80rpx;
                display: inline-block;
                overflow: hidden;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                line-clamp: 2;
            }

            .image {
                width: 300rpx;
                height: 300rpx;
            }

            .liteFootle {
                width: 100%;
                margin-top: 10rpx;
                margin-bottom: 10rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .fontImg {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 10rpx;
                }

                .liteTitle {
                    font-weight: bold;
                    margin-left: auto;
                }
            }
        }
    }

    .bodyFootle {
        width: 100%;
        height: 160rpx;
        line-height: 70rpx;
        text-align: center;
    }
}

.topBox {
    width: 100%;
    height: 88rpx;
}
</style>